<template>
  <div>
    <div>
      <div class="h60">
        <span class="exe_title">{{ Num }}.{{ item.title }}</span>
        <span class="tags">
          <el-tag class="jj-bg" v-if="item.isJt == 1">机经</el-tag>
          <el-tag class="yc">预测</el-tag>
          <el-tag class="ttNum">{{ item.titleNumber }}</el-tag>
        </span>
      </div>
      <div class="player">
        <Audioplayer
          v-if="item.url"
          :url="item.url"
          :readyTime="readyTime"
          :answerTime="answerTime"
          @sendTime="getTime"
          @startRecord="startRecord"
          ref="aplayer"
        ></Audioplayer>
         <h1 v-else class="none_audio_tip">此题暂未上传录音</h1>
      </div>
      {{ item.option }}

      <div
        :class="!isOpen ? 'setpink' : ''"
        class="microphone"
        @click="handleClick"
      >
        <i class="iconfont icon-maikefeng"></i>
      </div>
      <div class="operate_mic">
        <div v-if="isOpen > 0" class="countdown">点击开始录音</div>
        <div class="countdown" v-else>
          <span ref="zeroHidden">点击结束录音</span>
        </div>
      </div>
      <audio ref="audio" :src="audioUrl"></audio>
      <!-- 录音 -->
      <div class="record">
        <el-form ref="recorderForm">
          <Aplayer v-if="Rurl" :url="Rurl"></Aplayer>
        </el-form>
      </div>
      <div class="time">
        <span class="readyTime" v-if="readyTime > 0"
          >请准备：00:{{ readyTime > 9 ? readyTime : "0" + readyTime }}</span
        >
        <span v-if="readyTime == 0">答题时间：{{ s_to_hs(answerTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import writingUtil from "@/utils/writingUtil";
import Audioplayer from '../../player'
import Aplayer from '../../../../practice/exercise/aplayer'
export default {
  props: ['item', 'Num'],
  mixins: [writingUtil],
  components: {
    Audioplayer,
    Aplayer
  },
  data () {
    return {
      Rurl: '',
      countDown: 30,
      recordingCountDown: 15, // 答题时间倒计时
      totalTime: 0, // 录音总时长
      percent: 0, // 播放进度比
      type: 'pause',
      answer: "123",//答案
      subject: {},//题目详情
      eSubjectType: {},//题型信息
      readyTime: 3,//准备时间
      answerTime: 0,//答题时间
      last: '',//上一题
      next: '',//下一题
      id: '',
      interval: {},//循环组件
      isOpen: false,//是否开麦克风
      tips: false, // 麦克风是否授权
       audioUrl: require('../../../../../assets/alert/dingd.mp3'), // 提示音
    }
  },
  created () {
    this.Rurl=''
    var that = this
    this.getPermission()
    console.log(this.list);
    that.answerTimeCount()
    this.coutDown()
  },
  methods: {
    // 录音播放完毕，自动开始录音
    startRecord () {
      console.log('end');
      var that = this
      this.answerTimeCount()
      this.$refs.audio.play();
        setTimeout(() => {
          that.startRecorder()
        }, 1000);

    },
    // 播放音频的时候
    getTime () {
      clearInterval(this.interval.answerTime)
      this.answerTime = 0
      this.readyTime = 0
    },
  // 点击麦克风
    handleClick () {
      // 获取了麦克风权限才允许点击麦克录音
      if (this.tips) {
        this.isOpen = !this.isOpen
        if (!this.isOpen) { // 开启录音
          this.$msg.info('开始播放录音！')
          this.Rurl = ''
          this.readyTime = 0
          this.$refs.audio.play();//点击触发 点击音效
          clearInterval(this.interval.answerTime)
          if (this.answerTime !== 0) {
            this.answerTime = 0
            this.answerTimeCount()
          }
        } else { // 关闭录音
          this.getRecorder()
          clearInterval(this.interval.answerTime)
        }
      } else {
        this.$msg.info('请先打开麦克风授权')
      }
    },
    // 准备答题倒计时
    // 准备答题倒计时
    coutDown () {
      var that = this
      this.interval.mkf = setInterval(() => {
        if (this.readyTime > 0) {
          this.readyTime--
        } else {
          if (this.answerTime == 0) {
            return
          } else {
            this.isOpen = false
          }
        }
      }, 100);
    },
    // 答题时间计时
    answerTimeCount () {
      clearInterval(this.interval.answerTime)
      this.answerTime = 0
      this.interval.answerTime = setInterval(() => {
        // 答题时间上限
        if (this.answerTime < 15) {
          this.answerTime++
        } else {
          this.isOpen = true
          this.getRecorder()
          clearInterval(this.interval.answerTime)
        }
      }, 1000);


    },
  },
}
</script>
<style lang="less" scoped>
.none_audio_tip{
  font-size: 1.25rem;
  color: #999;
  padding: 1.125rem;
}
.player{
   margin-bottom: 1rem;
  border: 1px dashed #ff5e4e;
  background-color: #fffafa;
}
.time {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  position: relative;
  margin-top: 1.875rem;
  span {
    margin-right: 1.875rem;
  }
  .iconfont {
    font-size: 1.5rem;
    color: #ccc;
  }
  .end {
    position: absolute;
    right: -1.5rem;
    text-align: right;
  }
}
.record {
  margin-left: 15rem;
}
.operate_mic {
  text-align: center;
  font-size: 1.25rem;
}
.setpink {
  background-color: #ff5e4e !important;
}
.microphone {
  width: 4.375rem;
  height: 4.375rem;
  line-height: 4.375rem;
  text-align: center;
  margin-left: 47%;
  border-radius: 50%;
  cursor: pointer;
  background-color: #eee;
  .iconfont {
    font-size: 2.5rem;
    color: #fff;
  }
  .countdown {
    height: 2.8125rem;
    line-height: 2.8125rem;
    font-size: 1rem;
    color: #333;
    text-align: center;
  }
}

.h60 {
  height: 3.75rem;
  line-height: 3.75rem;
  background-color: #f7f7f7;
  margin-top: 1.875rem;
  display: flex;
  margin-bottom: 1rem;
  .label {
    height: 100%;
  }
  .tags {
    width: 36.625rem;
  }
  .exe_title {
    width: 90rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 1rem;
    padding-left: 1.25rem;
  }
  .el-tag {
    height: 1.575rem;
    line-height: 1.575rem;
    margin-right: 0.9375rem;
    color: #fff;
    padding: 0 0.375rem;
    border: none;
  }

  .ttNum {
    background-color: #94d0f7;
  }
  .jj-bg {
    background: #ff9b4f;
  }
  .yc {
    background-color: #00cccc;
  }
}
</style>